<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <blockquote class="text-warning" style="font-size: 14px">
          优质云服务器租聘服务<el-link href="https://www.rainyun.com/UTTN666_" type="primary" target="_blank">☛☛立即租用☚☚</el-link>
          &nbsp;&nbsp;&nbsp; 高性价比虚拟主机<el-link href="https://www.rainyun.com/UTTN666_1" type="primary"
                                                      target="_blank">☛☛限时特惠☚☚</el-link>
        </blockquote>
        <hr />
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <h2>我的博客管理系统</h2>
        <p>
          欢迎使用个人博客管理系统，这里可以管理所有博客内容，包括文章发布、评论审核、友链管理等功能。系统简洁易用，高效管理博客内容。
        </p>
        <p>
          <b>当前版本:</b> <span>v{{ version }}</span>
        </p>
        <p>
          <el-tag type="success">个人专用</el-tag>
        </p>
        <p>
          <el-button type="primary" icon="Edit" plain @click="goTarget('/articleManage/change')">写新文章</el-button>
          <el-button icon="Comment" plain @click="goTarget('/articleManage/comment')">管理评论</el-button>
          <el-button icon="Link" plain @click="goTarget('/homemenu/friendship')">管理友链</el-button>
        </p>
      </el-col>

      <el-col :sm="24" :lg="12" style="padding-left: 50px">
        <el-row>
          <el-col :span="24">
            <h2>待审核评论</h2>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-table :data="commentList" style="width: 100%" height="250" v-loading="commentLoading">
              <el-table-column prop="authorEmail" label="评论者邮箱" width="100"></el-table-column>
              <el-table-column prop="createTime" label="日期" width="170"></el-table-column>
              <el-table-column prop="articleTitle" label="文章" width="150"></el-table-column>
              <el-table-column prop="content" label="评论内容">
                <template #default="{ row }">
                  <el-tooltip effect="dark" :content="row.content" placement="top">
                    <span>{{ truncateContent(row.content) }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120">
                <template #default="{ row }">
                  <el-button size="mini" type="success" @click="approveComment(row.commentId)">通过</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-divider />
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <template v-slot:header>
            <div class="clearfix">
              <span>快捷操作</span>
            </div>
          </template>
          <div class="body">
            <p>
              <el-button type="text" icon="Edit" @click="goTarget('/articleManage/change')">写新文章</el-button>
            </p>
            <p>
              <el-button type="text" icon="Comment" @click="goTarget('/articleManage/comment')">查看评论</el-button>
            </p>
            <p>
              <el-button type="text" icon="Setting" @click="goTarget('/homemenu/friendship')">友链信息</el-button>
            </p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <template v-slot:header>
            <div class="clearfix">
              <span>待审核友链</span>
              <el-button style="float: right; padding: 3px 0" type="text" icon="Link"
                         @click="goTarget('/homemenu/friendship')">查看所有</el-button>
            </div>
          </template>
          <div class="body">
            <div v-if="pendingFriendships.length === 0" class="empty-state">
              暂无待审核友链
            </div>
            <div v-for="item in pendingFriendships" :key="item.friendshipId" class="friendship-item">
              <div class="friendship-info">
                <div class="site-avatar">
                  <el-avatar :size="32" :src="item.friendshipImg">
                    <el-icon>
                      <User />
                    </el-icon>
                  </el-avatar>
                </div>
                <div class="site-details">
                  <div class="site-name">{{ item.friendshipName }}</div>
                  <div class="site-url">{{ item.friendshipUrl }}</div>
                </div>
              </div>
              <div class="friendship-actions">
                <el-button type="success" size="small" @click="approveFriendship(item)">通过</el-button>
                <el-button type="danger" size="small" @click="rejectFriendship(item)">拒绝</el-button>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <template v-slot:header>
            <div class="clearfix">
              <span>服务器推荐</span>
            </div>
          </template>
          <div class="body">
            <h4>高性能云服务器租聘</h4>
            <p>稳定、快速、安全的企业级云服务器</p>
            <ul>
              <li>✔ 99.9%可用性保证</li>
              <li>✔ 24/7专业技术支持</li>
              <li>✔ 免费数据迁移服务</li>
              <li>✔ 弹性扩展资源</li>
            </ul>
            <el-button type="primary" size="small" @click="goTarget('https://www.rainyun.com/UTTN666_')">
              立即租用
            </el-button>
            <p style="margin-top:10px;font-size:12px;color:#999">使用优惠码UTTN666可领取首购折扣卷（可叠加）</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import { ref, onMounted, getCurrentInstance } from 'vue'
import { listComment, updateComment } from "@/api/bk/comment";
import { listFriendship, updateFriendship } from "@/api/bk/friendship";
import { User } from '@element-plus/icons-vue';

const { proxy } = getCurrentInstance();
const commentLoading = ref(false)
const friendshipLoading = ref(false)
const version = ref('1.0.0')

// 未审核评论数据
const commentList = ref([])
const commentapp = ref({
  commentId: null,
  commentStatus: 0,
})

// 未审核友链数据
const pendingFriendships = ref([])

const commentqueryParams = ref({
  commentStatus: 1,
})

// 友链查询参数
const friendshipQueryParams = ref({
  friendshipStatus: 0, // 假设0表示待审核状态
  pageNum: 1,
  pageSize: 5
})

/** 查询文章评论列表 */
function getCommentList() {
  commentLoading.value = true;
  listComment(commentqueryParams.value).then(response => {
    commentList.value = response.rows;
    commentLoading.value = false;
  });
}

/** 查询待审核友链列表 */
function getPendingFriendships() {
  friendshipLoading.value = true;
  listFriendship(friendshipQueryParams.value).then(response => {
    pendingFriendships.value = response.rows;
    friendshipLoading.value = false;
  });
}

// 截断评论内容
const truncateContent = (content) => {
  return content.length > 10 ? content.substring(0, 10) + '...' : content
}

// 审核通过评论
const approveComment = (id) => {
  commentapp.value.commentId = id;
  updateComment(commentapp.value).then(response => {
    proxy.$modal.msgSuccess("评论已通过审核");
    commentapp.value.commentId = null;
    getCommentList();
  });
}

// 审核通过友链
const approveFriendship = (item) => {
  const updatedFriendship = {
    ...item,
    friendshipStatus: 1 // 假设1表示已通过
  };

  updateFriendship(updatedFriendship).then(response => {
    proxy.$modal.msgSuccess("友链已通过审核");
    getPendingFriendships();
  });
}

// 拒绝友链
const rejectFriendship = (item) => {
  const updatedFriendship = {
    ...item,
    friendshipStatus: 2 // 假设2表示已拒绝
  };

  updateFriendship(updatedFriendship).then(response => {
    proxy.$modal.msgSuccess("已拒绝友链申请");
    getPendingFriendships();
  });
}

function goTarget(url) {
  window.open(url, '_blank')
}

onMounted(() => {
  getCommentList()
  getPendingFriendships()
})
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans",
  "Helvetica Neue",
  Helvetica,
  Arial,
  sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }

  .friendship-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #ebeef5;
  }

  .friendship-item:last-child {
    border-bottom: none;
  }

  .friendship-info {
    display: flex;
    align-items: center;
  }

  .site-details {
    margin-left: 10px;
  }

  .site-name {
    font-weight: bold;
    font-size: 14px;
  }

  .site-url {
    font-size: 12px;
    color: #909399;
    margin-top: 3px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .empty-state {
    text-align: center;
    color: #909399;
    padding: 20px 0;
  }
}
</style>